<template>

<div class="school">
    <div class="box-card">
       <!-- <div  class="title"  @click="toggleOpen">
            <span>管制类化学品采购情况</span>
            <i v-if="progress==='1'"><el-tag type="success">已完善</el-tag></i>
            <i v-if="progress==='0'"><el-tag type="danger">待完善</el-tag></i>
            <div class="head-right">
                <el-button type="text" @click="submit" v-if="!disabled">保存</el-button>
                <span class="toggle" @click="toggleOpen">
                    <i class="el-icon-arrow-up" v-if="open"></i>
                    <i class="el-icon-arrow-down"  v-else></i>
                </span>

            </div>
        </div>-->
        <item-header
                title="管制类化学品采购情况"
                :open="open"
                :progress="progress"
                :disabled="disabled"
                @submit="submit"
                @toggleOpen="toggleOpen"
                @changeDisabled="changeDisabled"
        />
        <div class="text item" v-if="open">
            <el-form :inline="true" :rules="rules" ref="form" :model="data.college_info" label-width="100px">


                <el-form-item label="是否已采购管制类化学品" prop="is_purchase_param" label-width="200px">
                    <el-radio-group v-model="data.college_info.is_purchase_param" :disabled="disabled">
                        <el-radio label="是"></el-radio>
                        <el-radio label="否"></el-radio>
                    </el-radio-group>
                </el-form-item>

                <div v-if="data.college_info.is_purchase_param === '是'">

                    <el-form-item label="剧毒品" prop="purchase_param1">
                        <el-input v-model="data.college_info.purchase_param1"  :disabled="disabled" style="width:130px">
                            <span slot="suffix" class="" style="padding-right:10px;">公斤/年</span>
                        </el-input>
                    </el-form-item>
                    <el-form-item label="主要品名" prop="purchase_param2" v-if="data.college_info.purchase_param1 !=='0'">
                        <el-input  placeholder="如有多个品名，请用分号隔开" v-model="data.college_info.purchase_param2"  :disabled="disabled" style="width:400px">
                        </el-input>
                    </el-form-item>
                    <br>

                    <el-form-item label="易制毒品" prop="purchase_param3">
                        <el-input v-model="data.college_info.purchase_param3"  :disabled="disabled" style="width:130px">
                            <span slot="suffix" class="" style="padding-right:10px;">公斤/年</span>
                        </el-input>
                    </el-form-item>
                    <el-form-item label="主要品名" prop="purchase_param4"  v-if="data.college_info.purchase_param3 !=='0'">
                        <el-input placeholder="如有多个品名，请用分号隔开" v-model="data.college_info.purchase_param4"  :disabled="disabled" style="width:400px">
                        </el-input>
                    </el-form-item>
                    <br>

                    <el-form-item label="易制爆品" prop="purchase_param5">
                        <el-input v-model="data.college_info.purchase_param5"  :disabled="disabled" style="width:130px">
                            <span slot="suffix" class="" style="padding-right:10px;">公斤/年</span>
                        </el-input>
                    </el-form-item>
                    <el-form-item   label="主要品名" prop="purchase_param6"  v-if="data.college_info.purchase_param5 !=='0'">
                        <el-input placeholder="如有多个品名，请用分号隔开" v-model="data.college_info.purchase_param6"  :disabled="disabled" style="width:400px">
                        </el-input>
                    </el-form-item>
                    <br>

                    <el-form-item label="爆炸品" prop="purchase_param7">
                        <el-input v-model="data.college_info.purchase_param7"  :disabled="disabled" style="width:130px">
                            <span slot="suffix" class="" style="padding-right:10px;">公斤/年</span>
                        </el-input>
                    </el-form-item>
                    <el-form-item label="主要品名" prop="purchase_param8"  v-if="data.college_info.purchase_param7 !=='0'">
                        <el-input placeholder="如有多个品名，请用分号隔开" v-model="data.college_info.purchase_param8"  :disabled="disabled" style="width:400px">
                        </el-input>
                    </el-form-item>
                    <br>

                    <el-form-item label="精麻类药品" prop="purchase_param9">
                        <el-input v-model="data.college_info.purchase_param9"  :disabled="disabled" style="width:130px">
                            <span slot="suffix" class="" style="padding-right:10px;">公斤/年</span>
                        </el-input>
                    </el-form-item>
                    <el-form-item   label="主要品名" prop="purchase_param10"  v-if="data.college_info.purchase_param9 !=='0'">
                        <el-input placeholder="如有多个品名，请用分号隔开" v-model="data.college_info.purchase_param10"  :disabled="disabled" style="width:400px">
                        </el-input>
                    </el-form-item>
                </div>


                <br>


            </el-form>
        </div>
    </div>

</div>


</template>

<script>
    import itemHeader from './item-header'
    export default {
        components:{itemHeader},
        name: "item1",
        props:['formUnit', 'is_disabled','expend'],
        computed:{
            progress(){

                return this.data.college_info.progress[this.index]
            }
        },
        watch: {
            formUnit(val) {
                this.data = this.formUnit;
            }
        },
        data(){
            return {
                disabled:this.is_disabled,
                complete:false,
                // data:this.formUnit,
                data:JSON.parse(JSON.stringify(this.formUnit)),
                open:this.expend,
                index:8,
                rules: {
                    "is_purchase_param": [
                        {required: true, message: '请填写此项',trigger: 'blur'}
                    ],
                    "purchase_param1": [
                        {required: true, message: '请填写此项',trigger: 'blur'}
                    ],
                    purchase_param2: [
                        {required: true, message: '请填写此项',trigger: 'blur'}
                    ],
                    purchase_param3: [
                        {required: true, message: '请填写此项',trigger: 'blur'}
                    ],
                    purchase_param4: [
                        {required: true, message: '请填写此项',trigger: 'blur'}
                    ],
                    purchase_param5: [
                        {required: true, message: '请填写此项',trigger: 'blur'}
                    ],
                    purchase_param6: [
                        {required: true, message: '请填写此项',trigger: 'blur'}
                    ],
                    purchase_param7: [
                        {required: true, message: '请填写此项',trigger: 'blur'}
                    ],
                    purchase_param8: [
                        {required: true, message: '请填写此项',trigger: 'blur'}
                    ],
                    purchase_param9: [
                        {required: true, message: '请填写此项',trigger: 'blur'}
                    ],
                    purchase_param10: [
                        {required: true, message: '请填写此项',trigger: 'blur'}
                    ],
                    purchase_param11: [
                        {required: true, message: '请填写此项',trigger: 'blur'}
                    ]
                },
            }
        },
        methods:{
            addItem(){

                this.data.college_info.purchase_param1_list.push({value:''})
            },
            removeItem(item) {
                var index = this.data.college_info.purchase_param1_list.indexOf(item)
                if (index !== -1) {
                    this.data.college_info.purchase_param1_list.splice(index, 1)
                }
            },
            toggleOpen(){
                this.open = !this.open
            },
            changeDisabled(val){
                if (val){
                    this.data =  JSON.parse(JSON.stringify(this.formUnit))
                }
                this.disabled = val
            },
            submit(e){
                window.event? window.event.cancelBubble = true : e.stopPropagation()
                this.$refs['form'].validate((valid) => {
                    if (valid) {

                        this.$emit('itemSave',this.data,this.index)
                        this.disabled = true


                    }
                })
            }
        }
    }
</script>

<style scoped>
    .toggle{
        cursor: pointer;
        display:inline-block;
    }
    .title .toggle i{
        font-size:20px;
        margin-left:0px;
    }
    .title{
        background: #eee;
        padding:0 20px;
        position:relative;
        margin-bottom:30px;
        cursor: pointer;
    }
    .title:hover{
        background: #e6e6e6;

    }
    .title i{
        font-size:12px;
        margin-left:20px;
        font-style: normal;
        color:#999;
    }
    .title .head-right{
        position:absolute;
        right:20px;
        top:1px;
    }
</style>
